<template>
<div>
  <!--   面包屑导航条-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>学生模块管理</el-breadcrumb-item>
    <el-breadcrumb-item>获取学生所有课时</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card class="box-card">
    <el-table
      :data="classesList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="120">
      </el-table-column>
      <el-table-column
        prop="teacherName"
        label="教师姓名"
        width="150">
      </el-table-column>

      <el-table-column
        prop="classDate"
        label="上课日期"
        width="180">
        <template slot-scope="scope">
          {{scope.row.classDate|dateftl}}
        </template>
      </el-table-column>
      <el-table-column
        prop="sellerName"
        label="销售姓名"
        width="150">
      </el-table-column>

      <el-table-column
        prop="classStatus"
        label="状态"
        width="150">
        <template slot-scope="scope">
          {{scope.row.classStatus|stidFit}}
        </template>
      </el-table-column>
      <el-table-column
        label="开始时间"
        width="150">
        <template slot-scope="scope">
          {{scope.row.beginTime}}
        </template>
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="classFee"
        label="课时费"
        width="150">
      </el-table-column>
      <el-table-column
        prop="studentName"
        label="学生姓名"
        width="150">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="科目"
        width="150">
      </el-table-column>
    </el-table>

    <!--用于分页的插件-->
    <el-pagination
      :current-page="pageCurrent"
      :page-size="pageSize"
      :page-sizes="[2, 3, 5, 10]"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </el-card>

</div>
</template>

<script>
  import moment from 'moment'
    export default {
        name: "AllClasses",
      data(){
          return{
            classesList:[],
            pageCurrent:1,
            pageSize:2,
            total: 0,
            id:""
          }
      },
      methods:{
        getClasses:function (id) {
          this.$http.post("students/getClassByPage?userId="+id+"&pageCurrent="+this.pageCurrent+"&pageSize="+this.pageSize).then((res)=>{
            /*请求数据进行赋值渲染*/
            console.info(res);
            this.classesList = res.data.result.students.records;
            this.total = res.data.result.students.total;
          })
        },
        handleSizeChange: function (val) {
          /*将数据重新赋值，并且向后端发送请求*/
          this.pageSize = val;
          this.getClasses(this.id);
        },
        handleCurrentChange: function (val) {
          /*将数据重新赋值，并且向后端发送请求*/
          this.pageCurrent = val;
          this.getClasses(this.id);
        },
      },
      mounted() {
        this.id = this.$route.query.id;
        this.getClasses(this.id);
      },
      filters:{
        beginFit:function (val) {
           return moment(val).format("YYYY-DD-MM hh:mm:ss");
        },
        dateftl:function (val) {
          return moment(val).format("YYYY-DD-MM");
        },
        stidFit:function (val) {
          if (val==0){
            return "未上课";
          }else if (val==1){
            return "已上课";
          }else if (val==2){
            return "已删除";
          }
        }
      }
    }
</script>

<style  scoped>

</style>
